<template>
  <div class="z-chart-line">
    <z-chart height="500px" :chart-option="chartOption" />
  </div>
</template>

<script>
//import ZChart from "@/components/echarts/zchart";
import echarts from "echarts";

export default {
  name: "line",
  //components: { ZChart },
  data() {
    return {
      chartOption: {
        xAxis: {
          type: "time",
          splitLine: {
            show: false
          },
          axisLabel: {
            color: "#AEE1FF",
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#163072",
              width: 2
            }
          }
        },
        yAxis: {
          axisLabel: {
            color: "#AEE1FF",
            fontSize: 14
          },
          nameTextStyle: {
            color: "#AEE1FF",
            fontSize: 14
          },
          name: "电量(千瓦时）",
          axisLine: {
            show: false
          },
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#163072"
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#46A4F7"
                },
                {
                  offset: 1,
                  color: "transparent"
                }
              ])
            },
            symbol: "none",
            itemStyle: {
              color: "#46A4F7"
            },
            data: [
              ["2020-01-02", 820],
              ["2020-01-03", 932],
              ["2020-01-04", 901],
              ["2020-01-05", 934],
              ["2020-01-06", 1290],
              ["2020-01-07", 1330],
              ["2020-01-08", 1320]
            ],
            type: "line"
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
</style>